<template>
	<view class="content">
		<view class="column body">
			<view class="column padding-20">
				<text class="text-size-40 font-bold">请选择关键词</text>
			</view>
			<uni-collapse :accordion="true">
				<uni-collapse-item style="background-color: #FFFFFF;"  v-for="(item, index) in keylist" :key="item.id" 
				:title="item.name" :industryPId="item.industryPId" :show-animation="item.animation">
					<view class="items">
						<text v-for="(item2, index2) in item.children" :key="index2" @click="select(index,index2)" class="item" :class="item2.selected == true ? 'text-blue' : 'text-normal'">
							{{ item2.name}}
						</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="bottom">
			<view class="selected row align-height">
				<text>已选</text>
				<scroll-view class="margin-left-20 row scroll-view-item" :scroll-x="true" >
					<view class="align-height selected-item" v-for="(item, index) in selected" :key="index">
						<text>{{item.name}}</text><!-- 
						<text class="yzb yzb-shanchu"></text> -->
					</view>
				</scroll-view>
			</view>
			<view class="row btn">
				<view class="btn-ensure center-algin" @click="submit()">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			types:[],
			keylist:[],//最终渲染数据
			selected:[],
			name:'',
			ids:'',
			addressData:{},
			choicetype:'',
			
		};
	},

	onLoad(query) {
		this.getKeyword();
		this.choicetype=query.choicetype;
	},
	mounted() {
	},
	methods: {			
		async getKeyword() {
			var that = this
			let res = await this.$apis.getKeyword()
			this.types = res.data
			// 存放最终归类好的数据
			    const resultData = [];
			    // 存放已经遍历过的元素
			    const temp = {};
			    for (let i = 0; i < this.types.length; i++) {
			        const item = this.types[i];
			        const itemObj = {
			            name: item.name,           
			        }
			        // 判断当前key是否在已经遍历过的元素对象里
			        if (!temp[item.keywordsType.name]) {
			            resultData.push({
			                name: item.keywordsType.name,
			                children: [itemObj]
			            });
			            // 将当前key放进已经遍历过的元素对象中
			            temp[item.keywordsType.name] = item;
			        } else {
			            // 遍历归类好的数据，将当前遍历到的数据放进与之对应的分类中
			            for (let j = 0; j < resultData.length; j++) {
			                let resultItem = resultData[j];
			                if (resultItem.name === item.keywordsType.name) {
			                    resultItem.children.push(itemObj);
			                    break;
			                }
			            }
			        }
			    }
				that.keylist = resultData
				console.log(that.keylist)
		},
		//选择
		select(index,index2) {
			var that = this			
			that.keylist[index].children[index2].selected = !that.keylist[index].children[index2].selected;
			//获取已选择的
			this.selected=[];
			this.name="";
			this.ids="";
			for(let i=0;i<that.keylist.length;i++){
				that.keylist[i].number=0;
				for(let j=0;j<that.keylist[i].children.length;j++){
					if(that.keylist[i].children[j].selected==true){
						this.selected.push(that.keylist[i].children[j]);
						that.keylist[i].industryPId+=1;
						this.name=this.name+","+that.keylist[i].children[j].name
						//this.ids=this.ids+","+that.keylist[i].children[j].industryId
					}
				}
			}
			this.name=this.name.substr(1,this.name.length);
			this.ids=this.ids.substr(1,this.ids.length);
			this.$forceUpdate();
		},
		
		submit(){
			if(!this.name){
				this.name="行业不限"
			}
			if(!this.ids){
				this.ids="0"
			}
			this.$page.prePage().position.keywords = this.name;
			uni.navigateBack({
				delta: 1
			})		
			
		}
	}
};
</script>

<style lang="scss">
.body{
	margin-bottom: 200upx;
}
.text-blue {
	color: #84C0F4;
	border: 1upx solid #84C0F4;
}
.text-normal {
	color: $font-color-666;
	border: 1upx solid  $border-color-base;
}

.items {
	display: flex;
	flex-wrap: wrap;
	padding: 20upx;
	text {
		font-size: $uni-font-size-sm;
		padding: 10upx 36upx;
		margin-right: 20upx;
		margin-bottom: 15upx;
		background-color: #fff;
		border-radius: 8upx;
	}
}

.bottom{
	position: fixed;
	bottom: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	width: 100%;
	padding: 20upx;
	box-sizing: border-box;
	border-top: 1upx solid $border-color-base;
	height: 200upx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;
	.selected{
		height: 80upx;
		.scroll-view-item{
			width: 90%;
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			white-space: nowrap;
			align-items: center;
		}
		.selected-item{
			display: inline-block;
			padding: 0 6rpx;
			height: 60rpx;
			flex-direction: row;
			align-items: center;
			background-color: #84C0F4;
			border-radius: 8rpx;
			margin-left: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 54rpx;
		}
		.yzb-shanchu{
			text-align: center;
			font-size: $font-size-36;
			padding-top: 8upx;
			margin-left: 7upx;
			color:  #fff;;
		}
	}
	
	.btn{
		height:80upx;
		padding: 20upx;
			
		.btn-clear{
			width: 36%;
			text-align: center;
			border-radius: 10upx;
			background-color: #e4e4e4;
		}
		
		.btn-ensure{
			width: 90%;
			margin-left: 3%;
			text-align: center;
			background-color:  #84C0F4;;
			color: #fff;
			border-radius: 10upx;
			display: block;
			margin: 0 auto;
			line-height: 80rpx;
		}
	}
}
</style>
